<template>
  <div>
    <div class="header">
      <h3>答题卡</h3>
      <p>
        <b><img src="../../assets/image/school/qp.png" alt="">全屏(F11)</b>
        <em @click="$router.push('/identificationrecord')">退出</em>
      </p>
    </div>
    <div class="cropperBox">
      <div class="cropperImageset" ref="scrollContainer">
        <div v-loading="loading"
			element-loading-text="图片加载中..."
			element-loading-spinner="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.8)">
          <canvas ref="canvas"></canvas>
        </div>
		<ul class="pagesetfixed">
			<li v-for="(item,index) in imageUrllist"  :class="index==tabindex?'hover':''" @click="pageimageclick(index)">{{index+1}}</li>
		</ul>
      </div>
      <div class="uploadcardInfo" ref="unloadishowscorrel">
        <h3>列表({{total}})</h3>
		<div class="yclbtitle">
			<div class="yclbtitleLeft">
				<el-input clearable placeholder="准考证号" v-model="examNumber"></el-input>
				<el-input clearable placeholder="考生姓名" v-model="studentName"></el-input>
				<el-button @click="searchboxinfo">搜索</el-button>
			</div>
		</div>
        <!-- 表格 -->
		<div style="padding:0 14px;position: relative;" ref="scrollContainercontent">
			<el-table
			     ref="multipleTable"
			     :data="questionlist"
			     :style="{width: (questionlist.length > 0 ? (questionlist[0].objectiveAnswers.length * 106*5) + 'px' : '100%') }"
				  class="custom-table"
					@row-click="handleRowClick"
					@selection-change="handleSelectionChange"
					:height="tableHeight"
			   >
			     <el-table-column type="selection" width="55" />
			     <el-table-column prop="batchNumber" label="批次号" width="80" />
				 <el-table-column prop="serialNumber" label="流水号" width="80" />
				 <el-table-column prop="examNumber" label="考号" width="120" />
				 <el-table-column prop="examName" label="姓名" width="100" />
			     <el-table-column
			       v-for="(chil, colIndex) in questionlist.length > 0 ? questionlist[0].objectiveAnswers : []"
			       :key="colIndex"
			       :label="`${chil.questionRuleName}${chil.questionNumber}`"
			     >
			       <template #default="{ row, $index }">
					   <div style="position:relative">
						   <b
							 :ref="`question-${$index}-${colIndex}`"
						     @click="handleCellClick(row.objectiveAnswers[colIndex], $event, colIndex, $index, row.paperImages)"
						     style="position:relative">
						   						<i :class="!row.objectiveAnswers[colIndex].isCheck ? 'boxihover' : ''" style="position:absolute;left:0;top:0;display: block;width:100%;
						   height:97%;z-index:111;"></i>
						   		<el-input v-if="!row.objectiveAnswers[colIndex].isCheck" v-model="row.objectiveAnswers[colIndex].option"></el-input>
						     {{ row.objectiveAnswers[colIndex].option }}
						   </b>
					   </div>
			       </template>
			     </el-table-column>
			</el-table>
		</div>
		<div class="examFootercontent">
			<span class="totaldata">共<i>{{total}}</i>条数据</span>
			<div>
				<el-pagination
					background
				      @current-change="handleCurrentChange"
					  :page-sizes="[20, 50, 100]"
					  @size-change="handleSizeChange"
					  :page-size="pageSize"
					  layout="sizes, prev, pager, next"
				      :total="total">
				</el-pagination>
			</div>
		</div>
      </div>
    </div>
  </div>
</template>

<script>
	import {get,post,del,dele} from '../../request/api.js'
export default {
  data() {
    return {
      canvas: null,
      ctx: null,
      isDrawing: false,
      isResizing: false,
      startX: 0,
      startY: 0,
      currentX: 0,
      currentY: 0,
      selectedAreas: [],
      image: null,
      activeAreaIndex: null,
      resizeHandleIndex: null,
      overHandleIndex: null,
      handleSize: 8,
	  questionlist:[],
      answerlist: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
	  examNumber:'',
	  studentName:'',
	   answerishow: false,
		currentAutoIndex:0,
		autoLocatedCells: [], // 存储所有符合条件的单元格信息
		scrollContainercontent: null, // 表格滚动容器引用
		addanswerLeft:0,
		addanswerTop:0,
		answerishow:false,
		rowindex:'',
		colindex:'',
		selected: [], // 存储已选中的答案
		imageUrllist:[{name:'1'},{name:'2'}],
		tabindex:0,
		currentIndex:1,
		isButtonClicked:false,
		viewerVisible: false, // 控制查看器的显示状态
		viewerIndex: 0, // 当前查看的图片索引
		restartupload:false,
		cardabsore:false,
		multipleSelection:[],
		tableBodyWrapper:null,
		currentPosition: { sIndex: -1, qIndex: -1 } ,// 当前高亮位置
		numbersl:{},
		batchrecognitionishow:false,
		mandatoryidentificationishow:false,
		isExamNo:true,
		isMissExam:false,
		isOption:false,
		rowpaperId:0,
		page:1,
		pageSize:20,
		total:0,
		tableHeight:0,
		loading:false
    };
  },
  mounted() {
	this.examobjcontent = JSON.parse(sessionStorage.getItem('examInfo'))
	//console.info(this.tableHeight)
	this.selectycbox()
	this.getdatanum()
	setTimeout(()=>{
		this.tableHeight = window.innerHeight - 240
	},1000)
  },
  methods: {
	  getdatanum(){
		let obj={
			examCourseId:this.examobjcontent.id
		}
		get('/scanpaperexception/exception',obj)
		.then(res=>{
			//console.info(res)
			if(res.code==200){
				this.numbersl = res.data
			}else{
				this.$message.error(res.message);
			}
		})
	  },
	  handleCurrentChange(val){
	  	this.page = val
	  	this.selectycbox()
	  },
	  handleSizeChange(val) {
	  	 this.pageSize = val
	  },
	  //获取答题卡选项异常
	  selectycbox() {
	        let obj = {
				page:this.page,
				pageSize:this.pageSize,
				query:{
					examCourseId: this.examobjcontent.id,
					examNo: this.examNumber,
					studentName: this.studentName,
				}
	        };
	        post('/scanpaperexception/allrecord', obj)
	          .then((res) => {
	            if (res.code === 200) {
	              // 检查数据是否存在
	              if (res.data && res.data.items.length > 0) {
	                this.questionlist = res.data.items;
					this.total = res.data.total
	                this.imageUrllist = res.data.items[0].paperImages;
	                setTimeout(() => {
	                  this.loadImage(res.data.items[0].paperImages[0].filePath);
	                }, 1000);
	              } else {
	                this.questionlist = []; // 如果数据为空，设置为空数组
	                this.imageUrllist = [];
	              }
	            } else {
	              this.$message.error(res.message);
	            }
	          })
	          .catch((error) => {
	            this.$message.error('请求失败，请检查网络连接');
	            console.error(error);
	          });
	      },
	  // 加载图片
	  loadImage(url) {
		  this.loading = true
	  	this.canvas = this.$refs.canvas;
	  	    this.ctx = this.canvas.getContext('2d'); 
	  		
	     this.image = new Image();
	     this.image.src = url; // 设置图片路径
	     this.image.onload = () => {
			 this.loading = false
	  	 // 设置 Canvas 宽高为图片的宽高
	  	 this.canvas.width = this.image.width;
	  	 this.canvas.height = this.image.height;
	   
	  	 // 在 Canvas 上绘制图片
	  	 this.ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height);
	  	 this.draw()
	     };
	     this.image.onerror = () => {
	  	 console.error('Failed to load image:', url);
		  this.loading = false
	  	 this.$message.error('无法加载图片，请检查图片 URL 是否正确或网络连接是否正常。');
	     };
	  },
	  handleCellClick(row,event,colindex,rowindex,imglist){ 
		  //console.info('imglist',event)
		  this.selected = []
		  this.rowindex=rowindex
		  this.colindex = colindex
		  // 设置当前点击的 answer.answerIsShow 为 true
		  const currentAnswer = this.questionlist[rowindex].objectiveAnswers[colindex];
		  currentAnswer.answerIsShow = true;
		  // this.answerishow = true
		  this.addanswerLeft=event.pageX-80
		  this.addanswerTop=event.pageY+20
		  this.imageUrllist = imglist
		  this.selectedAreas = [{width:row.w,height:row.h,x:row.x,y:row.y}]
		   this.tabindex = row.page-1
		   this.loadImage(imglist[row.page-1].filePath)
	},
	handleSelectionChange(val) {
	  this.multipleSelection = val;
	  if(!val){
	  	this.rowpaperId = val[0].id 
	  }
	},
    draw() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.ctx.drawImage(this.image, 0, 0, this.image.width, this.image.height);
      this.selectedAreas.forEach((area, index) => {
        if (this.$refs.scrollContainer) {
          this.$refs.scrollContainer.scrollLeft = area.x - 220;
          this.$refs.scrollContainer.scrollTop = area.y - 200;
        }
        this.ctx.strokeStyle = index === this.activeAreaIndex ? 'red' : 'red';
        this.ctx.lineWidth = 2;
        this.ctx.fillStyle = 'rgba(0, 0, 0, 0)';
        this.ctx.fillRect(area.x, area.y, area.width, area.height);
        this.ctx.strokeRect(area.x, area.y, area.width, area.height);
      });
      if (this.isDrawing) {
        this.ctx.strokeStyle = 'red';
        this.ctx.lineWidth = 2;
        this.ctx.fillRect(this.startX, this.startY, this.currentX - this.startX, this.currentY - this.startY);
        this.ctx.strokeRect(this.startX, this.startY, this.currentX - this.startX, this.currentY - this.startY);
      }
    },
	handleRowClick(row,column,enent){
		this.rowpaperId = row.id
		this.imageUrllist = row.paperImages
		// this.loadImage(row.paperImages[0].filePath)
	},
	pageimageclick(num){
		this.tabindex = num
		this.currentImage = this.imageUrllist[num]
		this.loadImage(this.imageUrllist[num].filePath)
	},
	searchboxinfo(){
		this.selectycbox()
	}
  }
};
</script>

<style scoped>
canvas {
  border: 1px solid #000;
}
.header{
	min-width:100%;padding:0 40px;
	height:48px;
	padding:0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color:#fff;
	background:#2379F6;
	font-size:16px;
}
.header h3{
	font-weight: normal;
	font-size:16px;
}
.header p{
	display: flex;
}
.header p b{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 134px;
	height: 32px;
	background: rgba(255,255,255,0.1);
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	text-align: center;
	line-height:32px;
	cursor: pointer;
	margin-right:14px;
}
.header p b img{
	width:16px;
	margin-right:8px;
}
.header p em{
	display: inline-block;
	width: 76px;
	height: 32px;
	background: #FFFFFF;
	border-radius: 17px;
	border: 1px solid #FFFFFF;
	color:#2379F6;
	text-align: center;
	line-height:32px;
	cursor:pointer
}
.tabNav{
	min-width:100%;padding:0 40px;
	height:54px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:0 24px 0 10px;
	background:#fff;
}
.tabNav ul{
	display: flex;
	align-items: center;
	font-size:14px;
}
.tabNav ul li{
	padding:0 20px;
	cursor: pointer;
	line-height:38px;
	color:#557292;
	position:relative
}
.tabNav ul li:hover,.tabNav ul li.hover{
	color:#2A303B;
}
.tabNav ul li:hover::after,.tabNav ul li.hover::after{
	content:'';
	width: 24px;
	height: 4px;
	background: #295CFF;
	border-radius: 2px;
	position:absolute;
	left:50%;
	transform: translateX(-50%);
	bottom:0
}
.tabNav span{
	display: inline-block;
	width: 140px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	font-weight: 500;
	font-size: 14px;
	color: #295CFF;
	text-align: center;
	line-height:34px;
	cursor: pointer;
}
/* 上传 */
.uploadMarks{
	box-sizing: border-box;
	background:#F4F7FD;
	width:100vw;
	height:calc(100vh - 49px);
	position: relative;
}
.smcsbutton{
	width: 124px;
	height: 34px;
	background: #2379F6;
	border-radius: 10px;
	font-size: 14px;
	color: #FFFFFF;
	text-align: center;
	border:none;
	/* margin:24px 0 0 24px; */
	position: absolute;
	padding:0;
	left:24px;
	top:24px;
}
.boxcenter{
	display: flex;
	justify-content: space-between;
}
.uploadcardInfo{
	width:80%;
	height:calc(100vh - 49px);
	background:#fff;
	position:relative;
	box-shadow: 0 4px 16px 0 #5572921a;
	overflow: auto;
	position:relative;
}
.examboxbutton{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
}
.examboxbutton >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.examboxbutton1{
	width:100%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	padding:0 15px;
	height: 54px;
	background: #E8F0FA;
	position:absolute;
	left:0;
	bottom:0;
	justify-content: center;
}
.examboxbutton1 >>>  .el-button{
	width: 124px;
	height: 34px;
	border-radius:10px;
	padding:0;
	margin:0;
	font-size:12px;
	border: 1px solid #295CFF;
	color:#295CFF;
	background:none;
}
.examboxbutton1 >>>  .el-button:first-child{
	background:#295CFF;
	border: 1px solid #295CFF;
	color:#fff;
}
.examboxbutton1 >>>  .el-button:nth-child(2){
	margin:0 8px;
}
.qtbuttonset{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top:14px;
}
.qtbuttonset em{
	width: 124px;
	height: 34px;
	background: #295CFF;
	border-radius: 10px;
	font-size:14px;
	color:#fff;
	text-align: center;
	line-height: 34px;
	margin:8px;
}
.qtbuttonset em:last-child{
	width: 124px;
	height: 34px;
	background: #F2F6FB;
	border-radius: 10px;
	border: 1px solid #295CFF;
	color:#295CFF;
}
.uploadcardInfo h3{
	line-height:67px;
	border-bottom:solid 1px #D8E4F0;
	padding:0 24px;
	color:#2A303B;
	font-weight:normal;
	font-size:18px;
}
.uploaddiv{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.uploaddivattention{
	font-size: 14px;
	color: #B3B8C2;
}
.cropperBox{
	height:calc(100vh - 49px);
	display: flex;
}
.cropperImageset{
	width:calc(100% - 562px);
	height:calc(100vh - 49px);
	overflow:auto;
	position: relative
}
.routate{
  	position:absolute;
  	left:50px;
  	top:5px;
  	background:#fff;
  	height:60px;
  	display: flex;
  	align-items: center;
  	padding:0 10px 0 0;
  	box-shadow: 0 0 5px rgba(0,0,0,0.1);
  	border-radius:5px;
  	font-size:14px;
  	color:#557292;
  	border-radius: 10px;
	z-index:10
  }
 .routate >>> .el-select,.routate >>>.el-input{
  	width:150px;
  }
 .routate >>> .el-select{
  	margin-right:10px;
  }
  .routate >>>.el-input{
  	margin-left:10px;
  	margin-right:10px;
  }
 .routate >>> .el-button{
  	border-radius:10px;
  	height:35px;
  	width:55px;
  	padding:0 ;
	margin-left:10px
  }
  .routate >>> .el-input__inner{
  	border-radius:10px;
  	height:35px;
  }
  .breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
  	font-weight:normal
  }
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
  .breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
  	font-weight:bold
  }
  .routerlistbox{
	  width: 224px;
	  height: 30px;
	  background: #295cff0f;
	  border: 1px solid #FFFFFF;
	  border-radius: 4px;
	  display: flex;
	  align-items: center
  }
  .routerlistbox a{
	  flex:1;
	  height:30px;
	  line-height:30px;
	  text-align: center;
	  font-size:14px;
	  color:#fff;
  }
   .routerlistbox a.hover{
	   background:#fff;
	   color:#2379F6
   }
   .uploadcardInfo h3{
	   padding:0 24px;
	   display: flex;
	   justify-content: space-between;
	   font-size:18px;
	   color:#2A303B;
	   align-items: center;
	   border-bottom:solid 1px #D8E4F0
   }
   .uploadcardInfo h3 .el-button{
	   width: 124px;
	   height: 34px;
	   background: #295CFF;
	   border-radius: 10px;
	   font-size: 14px;
	   color: #FFFFFF;
	   line-height:34px;
	   padding:0;
	   border:none;
   }
   .uploadcardInfo ul{
	   margin-top:24px;
   }
    .uploadcardInfo ul li{
		display: flex;
		align-items: center;
		border-top:solid 1px #D8E4F0;
		border-left:solid  1px #D8E4F0;
		height:40px;
	}
    .uploadcardInfo ul li span{
		display:block;
		border-bottom:solid 1px #D8E4F0;
		border-right:solid  1px #D8E4F0;
		height:40px;
		width:80px;
		text-align: center;
		font-size:14px;
		line-height:40px;
		color:#2A303B;
	}
	.uploadcardInfo ul li span.hover{
		background: #ec555a33;
		border: 1px solid #EC555A;
		cursor: pointer;
	}
	.answerbox {
	  width:auto;
	  height: 138px;
	  background: #FFFFFF;
	  box-shadow: 0 2px 6px 0 rgba(85,114,146,0.1);
	  border-radius: 10px;
	  padding: 0 20px;
	  position: fixed;
	  z-index: 1000; /* 确保弹框在最上层 */
	}
	.answerbox h4{
		font-size:14px;
		padding-top:14px;
	}
	.answerbox p{
		display: flex;
		padding-top:8px;
	}
	.answerbox p i{
		width: 30px;
		height: 34px;
		background: #295cff1a;
		border: 1px solid #295cff1a;
		border-radius: 10px;
		line-height:34px;
		text-align: center;
		font-size:14px;
		color:#295CFF;
		margin-right:10px;
		font-style: normal;
		cursor: pointer;
	}
	.answerbox div{
		display: flex;
		justify-content: right;
		align-items: center;
		margin-top:10px;
	}
	.answerbox div span{
		display: inline-block;
		width: 62px;
		height: 34px;
		border: 1px solid #295CFF;
		border-radius: 10px;
		font-size:14px;
		color:#295CFF;
		text-align: center;
		line-height:34px;
		margin-right:14px;
		cursor: pointer;
	}
	.answerbox div b{
		width: 76px !important;
		height: 34px;
		background: #295CFF !important;
		border: 1px solid #295cff1a;
		border-radius: 10px;
		font-size:14px;
		color:#fff !important;
		text-align: center;
		line-height:34px;
		cursor: pointer;
	}
	.yclbtitle{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:16px;
	}
	.yclbtitleLeft{
		display: flex;
	}
	.yclbtitleLeft >>> .el-input{
		margin-right:15px;
	}
	.yclbtitleLeft >>> .el-input__inner{
		width: 126px;
		height: 34px;
		border: 1px solid #D8E4F0;
		border-radius: 10px;
		color:#2A303B;
		font-size:14px;
	}
	.yclbtitleLeft >>> .el-input__icon{
		line-height:34px;
	}
	.yclbtitleLeft >>> .el-button{
		width:80px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		border:none;
		line-height:34px;
		color:#fff;
		padding:0 20px
	}
	.custom-table {
	  width: 100%;
	  border: 1px solid rgba(216,228,240,0.34);
	  border-radius:10px;
	  border-right: none;
	  border-bottom:none;
	}
	
	/* 自定义表格内部元素的样式 */
	.custom-table >>> .el-table{
		border-collapse: collapse; /* 关闭默认的边框合并模式 */
		  border-spacing: 0 !important; /* 强制重置间距 */
	}
	.custom-table >>> .el-table__header-wrapper th {
	  background-color: #E8F0FA;
	  height:42px;
	  padding:0;
	  text-align: center;
	  font-weight:normal
	}
	.custom-table >>> .el-table__row td {
	  height:42px;
	  padding:0;
	  text-align: center;
	  border-bottom:solid 1px rgba(216,228,240,0.34);
	  border-right:solid 1px rgba(216,228,240,0.34);
	  border-collapse: collapse; /* 关闭默认的边框合并模式 */
	    border-spacing: 0 !important; /* 强制重置间距 */
		font-size:14px;
	}
	.custom-table >>> .el-table__row td b{
		display:block;
		height:36px;
		width:97%;
		text-align: center;
		font-size:14px;
		line-height:36px;
		color:#2A303B;
	}
	.custom-table >>> .el-table__row td b.hover{
		border: 1px solid #EC555A;
		cursor: pointer;
	}
	.boxihover{
		border: 1px solid #EC555A;
		cursor: pointer;
	}
	.custom-table >>> .el-input{
		height:35px;
	}
	.custom-table >>> .el-input__inner{
		background:rgba(236,85,90,0.2); ;
		padding:0;
		text-align: center;
		border:none;
		height:36px;
		width:101%
	}
	.el-table .warning-row {
	    background: #ffffff;
	 }
	.el-table .success-row {
	    background: #D8E4F0;
	}
	.el-table .cell{
		padding:0 !important;
	}
	.custom-table >>> .el-table__row td div.cell{
		padding:0 !important;
	}
	.cardczpk{
		  box-sizing: border-box;
		  width: 174px;
		  height: 90px;
		  background: #FFFFFF;
		  box-shadow: 0 4px 16px 0 #5572921a;
		  border-radius: 10px;
		  position:fixed;
		  left:24px;
		  top:72px;
		  padding:14px;
	}
	.cardczpk span{
		  font-size:14px;
		  color:#2A303B;
	}
	.cardczpk div{
		  display: flex;
		  align-items: center;
	}
	.cardczpk div i,.cardczpk div b{
		  box-sizing: border-box;
		  font-style: normal;
		  width: 66px;
		  height: 34px;
		  background: #295cff1a;
		  border: 1px solid #295cff1a;
		  border-radius: 10px;
		  font-size:14px;
		  color:#295CFF;
		  line-height:34px;
		  padding-left:10px;
		  cursor: pointer;
		  margin-top:5px;
	}
	.cardczpk div i{
		  background:url(../../assets/image/school/roate.png) no-repeat 43px center;
		  background-size:13px 14px
	}
	.cardczpk div b{
		  margin-left:14px;
		  background:url(../../assets/image/school/px.png) no-repeat 43px center;
		  background-size:13px 14px
	}
	.pagesetfixed{
		   position:fixed;
		   left:25px;
		   bottom:25px;
		   display: flex;
		   align-items: center;
		   width:auto;
		   height: 43px;
		   border-radius: 5px;
		   background: #FFFFFF;
		   box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3); 
		   padding-left:10px;
	}
	.pagesetfixed li{
		  width: 25px;
		  height: 25px;
		  border-radius: 3px;
		  opacity: 1;
		  /* Brand 品牌/Brand1-Light */
		  background: #F2F3FF;
		  line-height:25px;
		  font-size: 14px;
		  color:#366EF4;
		  text-align: center;
		  margin-right:10px;
		  cursor: pointer;
	}
	.pagesetfixed li.hover{
		   background:#366EF4;
		   color:#fff;
	}
	.uploadcadContent{
		   position:fixed;
		   width:100%;
		   height:100%;
		   background:rgba(0,0,0,0.7);
		   left:0;
		   top:0;
		   z-index: 10000;
	  }
	  .uploadcad{
		  background: #FFFFFF;
		  box-shadow: 0 4px 16px 0 #5572921a;
		  border-radius: 10px;
		  padding:25px 0 25px 25px;
		  position:fixed;
		  left:50%;
		  top:50%;
		  transform: translate(-50%,-50%);
		  max-width:875px;
		  max-height:500px;
	  }
	  .uploadcad ul{
		  display: flex;
		  align-items: center;
		  flex-wrap: wrap;
	  }
	  .uploadcad ul li{
		  width: 200px;
		  height: 140px;
		  background: #33333d;
		  margin-right:25px;
		  position:relative
	  }
	  .uploadcad ul li img{
		  width:100%;
		  border: 1px solid #295cff80;
	  }
	  .uploadcad ul li div{
		  font-size:12px;
		  text-align: center;
	  }
	  .uploadcad ul li div span{
		  padding-top:12px;
		  color:#295CFF;
		  cursor:pointer;
	  }
	  .uploadcad h3{
		  font-weight:normal;
		  font-size:18px;
		  margin-bottom:15px;
	  }
	  .uploadcad ul li p{
		  width:100%;
		  height:100%;
		  position:absolute;
		  left:0;
		  top:0;
		  background:rgba(0,0,0,0.3);
		  display: flex;
		  align-items: center;
		  justify-content: center;
	  }
	  .uploadcad ul li em{
		  width: 52px;
		  height: 24px;
		  background: #ffffff;
		  border-radius: 12px;
		  font-size: 16px;
		  color: #295CFF;
		  text-align: justify;
		  line-height:24px;
		  text-align: center;
		  font-style:normal;
		  cursor: pointer;
	  }
	  .buttonreupload{
		  margin-top:50px;
	  }
	  .buttonreupload button,.buttonreupload b{
		  display: inline-block;
		 width: 124px;
		 height: 34px;
		 border-radius: 10px; 
		 border: 1px solid #295CFF;
		 text-align: center;
		 line-height:34px;
		 font-size:14px;
		 cursor: pointer;
	  }
	  .buttonreupload button{
		  background: #295CFF;
		  color:#fff;
		  margin-right:24px;
	  }
	  .buttonreupload b{
		  color:#295CFF;
		  background: #F2F6FB;
	  }
	  .boxsetdelecte{
	  	position:relative;
	  }
	  .boxsetdelecte span{
	  	position:absolute;
	  	left:-24px;
	  	top:24px;
	  }
	  .buttonboxedit{
	    	display: flex;
	    	align-items: center;
	    	justify-content: center;
	    	padding-top:5px;
	  	width:200px;
	  	height:140px;
	  	background:rgba(0,0,0,0.5);
	  	position:absolute;
	  	left:-12px;
	  	top:35px;
	    }
	    .buttonboxedit i{
	    	width: 52px;
	    	height: 24px;
	    	background: #fff;
	    	border-radius: 12px;
	    	font-size: 16px;
	    	color: #295CFF;
	    	text-align: justify;
	    	line-height:24px;
	    	text-align: center;
	    	font-style:normal;
	    	cursor: pointer;
	    }
	    .boxsetdelecte b{
	    	display: block;
	    	text-align: center;
	    	font-size:20px;
	    	padding-bottom:6px;
	    }
	  .imgmove span{
	  	display: flex;
	  	align-items: center;
	  	margin:0 13px;
	  }
	  .imgmove span div{
	  	margin:0 13px;
	  }
	  .addExamMain{
	  	position: fixed;
	  	width:100%;
	  	height:100%;
	  	background:rgba(0,0,0,0.5);
	  	left:0;
	  	top:0;
	  	z-index:100;
	  }
	  .addExamContent{
	  	width: 584px;
	  	height: auto;
	  	background: #FFFFFF;
	  	box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
	  	border-radius: 10px;
	  	position: fixed;
	  	left:50%;
	  	top:50%;
	  	transform: translate(-50%,-50%);
	  	z-index:2;
	  	box-sizing: border-box;
	  	padding:30px;
	  }
	  .addExamContent h3{
	  	font-size:18px;
	  	padding-bottom:10px;
	  }
	  .addExamContent p{
	  		 color:red;
	  		 font-size:14px;
	  }
	  .sbcontentbsl{
	  		 display: flex;
	  		 align-items: center;
	  		 padding:20px 0;
	  		 color:#333;
	  		 font-size:14px;
	  }
	  .sbcontentbsl >>> .el-checkbox{
	  		 color:#333;
	  }
	  .sbcontentbsl span{
	  		 width:200px;
	  		 height:35px;
	  		 background: #F7F8FA;
	  		 border-radius:4px;
	  		 padding-left:15px;
	  		 font-size:14px;
	  		 color:#86909C;
	  		 line-height:35px;
	  		 margin-left:15px;
	  }
	  .sbjdprogreen{
	  		 font-size:14px;
	  }
	  .groupbutton{
	  	display: flex;
	  	align-items: center;
	  	padding-top:20px;
	  }
	  .groupbutton >>> .el-button{
	  	width: 124px;
	  	height: 34px;
	  	background: #295CFF;
	  	border-radius: 10px;
	  	font-size: 14px;
	  	color: #FFFFFF;
	  	padding:0;
	  }
	  .groupbutton >>> .el-button:last-child{
	  	background: #F2F6FB;
	  	border-radius: 10px;
	  	border: 1px solid #295CFF;
	  	color:#295CFF;
	  	margin-left:24px;
	  }
	  .examFootercontent{
	  	width:100%;
	  	margin:0 auto;
	  	display: flex;
	  	justify-content: space-between;
	  	align-items: center;
	  }
	  .examFootercontent .totaldata{
	  	font-size:14px;
		padding-left:15px;
	  }
	  .examFootercontent .totaldata i{
	  	display: inline-block;
	  	color:#295CFF;
	  	font-style: normal;
	  	line-height:54px;
	  	padding:0 3px;
	  }
</style>